<template>
  <view class="login-container">
    <!-- 顶部校徽 -->
    <view class="logo-box">
      <image src="/static/logo.png" mode="aspectFit" class="school-logo" />
      <text class="school-name">大学生就业服务平台</text>
    </view>
<!-- 
    登录表单 -->
    <uni-forms ref="loginForm" :model="formData" :rules="rules" class="login-form">
      <uni-forms-item label="账号" name="username">
        <uni-easyinput 
          v-model="formData.username" 
          placeholder="请输入账号"
          prefixIcon="person"
        />
      </uni-forms-item>

      <uni-forms-item label="密码" name="password">
        <uni-easyinput 
          v-model="formData.password" 
          placeholder="请输入密码" 
          type="password"
          prefixIcon="locked"
        />
      </uni-forms-item>

      <!-- 辅助功能 -->
      <view class="form-helper">
        <label class="remember-me">
          <checkbox-group @change="toggleRemember">
            <checkbox :checked="rememberMe" color="#007AFF"/>
          </checkbox-group>
          <text>记住我</text>
        </label>
        <text class="forgot-pwd" @click="navigateToForgot">忘记密码？</text>
      </view>

      <!-- 登录按钮 -->
      <button 
        type="primary" 
        class="login-btn" 
        :loading="loading"
        @click="handleLogin"
      >
        {{ loading ? '登录中...' : '立即登录' }}
      </button>

      <!-- 注册入口 -->
      <view class="register-link">
        <text>没有账号？</text>
        <text class="link-text" @click="navigateToRegister">立即注册</text>
      </view>
    </uni-forms>
 <!-- 微信登录按钮（添加了样式类） -->
    <view class="wx-icon-box" @click="handleWxlogin">
         <image 
           src="/static/wx.png" 
           class="wx-icon"
           mode="aspectFit"
         />
       </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { login,wxlogin } from '../../../utils/tokenUtil';
const loginForm = ref();
const loading = ref(false);
const rememberMe = ref(true);

const formData = reactive({
  username: '',
  password: ''
});
//
const handleWxlogin=()=>{
	wxlogin((error, userInfo) => {
    if (error) {
		uni.showToast({
			title:"微信登录失败 请重试"
		})
    } else {
		// uni.switchTab({
		//            url: '/pages/home/home' // 确保这个路径是正确的 tabBar 页面路径
		//        });
        console.log('登录成功，用户信息:', userInfo);
        // 在这里可以进行后续操作，如更新页面数据等
    }
}); 
}
// 表单验证规则
const rules = reactive({
    username: {
        rules: [
            { required: true, errorMessage: '账号不能为空' },
            { minLength: 2, errorMessage: '账号长度不能少于 2 位' },
            { maxLength: 20, errorMessage: '账号长度不能超过 20 位' }
        ]
    },
    password: {
        rules: [
            { required: true, errorMessage: '密码不能为空' },
            { minLength: 5, errorMessage: '密码长度不能少于 5 位' },
            { maxLength: 20, errorMessage: '密码长度不能超过 20 位' }
        ]
    }
});

// 初始化检查记住的账号
onMounted(() => {
  const savedAccount = uni.getStorageSync('savedAccount');
  if (savedAccount) {
    formData.username = savedAccount.username;
    formData.password = savedAccount.password;
  }
});

// 处理登录
const handleLogin = async () => {
	login(formData.username,formData.password)
    if (rememberMe.value) {
      uni.setStorageSync('savedAccount', formData);
    } else {
      uni.removeStorageSync('savedAccount');
    }

};

// 切换记住我
const toggleRemember = (e) => {
  rememberMe.value = e.detail.value.length > 0;
};

// 跳转找回密码
const navigateToForgot = () => {
  uni.navigateTo({ url: '/pages/mine/findPassword/findPassword' });
};

// 跳转注册
const navigateToRegister = () => {

  uni.navigateTo({ url: '/pages/mine/register/register' });
};
</script>
<style>
	.login-container {
	  padding-right: 40rpx;
	  padding-left: 40rpx;
	  height: 100vh;
	  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
	}
	
	.logo-box {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  padding: 80rpx 0;
	}
	
	.logo-box .school-logo {
	  width: 150rpx;
	  height: 150rpx;
	  margin-bottom: 20rpx;
	}
	
	.logo-box .school-name {
	  font-size: 36rpx;
	  color: #333;
	  font-weight: bold;
	}
	
	.login-form {
	  background: #fff;
	  padding: 40rpx;
	  border-radius: 20rpx;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	}
	
	.form-helper {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin: 30rpx 0;
	}
	
	.form-helper .remember-me {
	  display: flex;
	  align-items: center;
	}
	
	.form-helper .remember-me checkbox {
	  transform: scale(0.8);
	  margin-right: 10rpx;
	}
	
	.form-helper .forgot-pwd {
	  color: #007AFF;
	  font-size: 28rpx;
	}
	
	.login-btn {
	  margin-top: 40rpx;
	  height: 90rpx;
	  line-height: 90rpx;
	  font-size: 32rpx;
	  border-radius: 45rpx;
	}
	
	.register-link {
	  text-align: center;
	  margin-top: 40rpx;
	  color: #666;
	}
	
	.register-link .link-text {
	  color: #007AFF;
	  margin-left: 20rpx;
	}
	  /* 新增底部微信图标样式 */
	   .wx-icon-box {
	     position: fixed; /* 底部固定定位 */
	     bottom: 40rpx; /* 距离底部40rpx */
	     left: 50%; /* 水平居中 */
	     transform: translateX(-50%); /* 配合left实现居中 */
	     width: 80rpx; /* 图标容器宽度 */
	     height: 80rpx; /* 图标容器高度 */
	     cursor: pointer;
	     transition: all 0.3s; /* 动画过渡 */
	   }
	 
	   .wx-icon-box:hover {
	     opacity: 0.8; /* 悬停时透明度降低 */
	     transform: translateX(-50%) scale(1.05); /* 轻微放大 */
	   }
	 
	   .wx-icon {
	     width: 100%; /* 填充容器 */
	     height: 100%; /* 填充容器 */
	   }
</style>